<template>
  <div class="bottom-bar">

    <div class="left" @click="checkClick" >
      <p class="btn" v-show="!isSelectAll">
        <img src="~assets/images/cart/椭圆1拷贝3@2x.png" alt="" />
      </p>
      <p class="btn" v-show="isSelectAll">
        <img src="~assets/images/cart/选中@2x.png" alt="" />
      </p>
    </div>

    <div class="checkAll">
      <p >全选</p>
      
    </div>

    <div class="total">
      <p class="heji">合计:</p>
      <p class="jige">¥{{totalPrice}}</p>
    </div>

    <div class="go">
      <div>
        <p v-show="rightShow" @click="calcClick">去计算</p>
         <p  class="dele" v-show="!rightShow" @click="deleteClick">删除</p>
      </div>
    </div>
  </div>
</template>

<script>
import {mapState} from "vuex";
export default {
  name: 'cartBottomBar',
  computed: {
     ...mapState(['rightShow']),

     /* 计算有选中的商品的总价格 */
    totalPrice () {
      return this.$store.state.cartList.filter(item => {
        return item.checked
      }).reduce((preValue,item) => {
        return preValue + item.price * item.count > 10000 ? "999+" : preValue + item.price * item.count
      },0)
    },

    /* 判断是否有一个是不选中的，如果有一个是不选中的全选按钮的状态就是不显示的 */
    isSelectAll () {
      if(this.$store.state.cartList.length == 0) return
      return !this.$store.state.cartList.find(item => !item.checked)
    }
  },
  methods: {
    /* 点击全选按钮 ： 如果原来都是选中的，全选就是不选中；如果原来都是不选中的（某些不选中的）就全部选中 */
    checkClick () {
     if(this.isSelectAll) { //全部选中
      this.$store.state.cartList.forEach(item => item.checked = false)
     }else { //部分或全部不选中
       this.$store.state.cartList.forEach(item => item.checked = true)
     }
    },
    
    /* 删除选中的商品 */
    deleteClick () {
      this.$store.commit('deleteClick')
    },
    
    calcClick () {
      if(!this.isSelectAll){
        this.$toast.show('请选择购买的商品')
      }
    }
  }
};
</script>

<style lang="less" scoped>
.bottom-bar {
  height: 0.49rem;
  display: flex;
  align-items: center;
  background: #fff;
  position: relative;
  bottom: 0.49rem;
  .left {
    .btn {
      width: 0.175rem;
      height: 0.175rem;
      line-height: 0.175rem;
      text-align: center;
      margin-left: 0.15rem;
      img {
        width: 100%;
        margin-top: -.06rem;
      }
    }
  }
  .checkAll {
    font-size: .15rem;
    color: #333;
    margin-left: .055rem;
    min-width: .3rem;
  }
  .total {
    font-size: .15rem;
    left: .775rem;
    position: relative;
    color: #333;
    display: flex;
    .heji {
      font-size: .15rem;
      color: #333;
      min-width: .4rem;
    }
    .jige {
      color: #D20A0A;
      margin-left: .13rem;
      min-width: .5rem;
    }
  }
  .go {
    height: .485rem;
    background: #E6212A;
    color: #FFFFFF;
    font-size: .18rem;
    text-align: center;
    line-height: .485rem;
    position: relative;
    right: -1.1rem;
    min-width: 1rem;
  }
}
</style>